import Taro, {Component} from "@tarojs/taro";
import {View, ScrollView, Image, Text} from "@tarojs/components";
import {toJS} from 'mobx'
import {inject, observer} from '@tarojs/mobx'
import {IStoreProps} from '../../store/Stores'
import {getRuntime,pageSize,subtime} from '../../utils/common'

import './index.less'
import './integral.less'
import bg_13 from "../../assets/img/bg_13.jpg";

// 我的积分
interface IHomeProps extends IStoreProps {}

@inject("stores")
@observer
class Company extends Component<IHomeProps> {
  constructor(props) {
    super(props)
  }

  state = {
    currentNavId: 1, // 1: 获取 2: 支出
    items:[],
    totalCount:0,
    pageIndex:1,
    pageSize,
    totalIntegral:0,
  }

  componentWillMount(): void {
    Taro.setNavigationBarTitle({ title:'我的积分' })
    let totalIntegral = this.$router.params.totalPoints || 0
    this.setState({ totalIntegral })
    this.getUserPointRecords()
  }

  handelRouter(url: string = '/pages/index/index'): void {
    getRuntime().navigateTo(url)
  }

  changeNavId(id:number){
    this.setState(
      {currentNavId:parseInt(id), totalCount:0, items:[]},
      () => {
        this.getUserPointRecords()
      })
  }

  getUserPointRecords() {
    let { userStore } = this.props.stores
    let { currentNavId,pageIndex,pageSize } = this.state
    userStore.getUserPointRecords({
      userPointsType: currentNavId,
      pageIndex,
      pageSize,
      callback: res => {
        if (pageIndex === 1) {
          this.setState({totalCount: toJS(res.totalCount), items: toJS(res.items)})
        }else {
          const { items } = this.state;
          items.push(...res.items || []);
          this.setState({totalCount: res.totalCount, items})
        }
      }
    })
  }

  onReachBottom(): void {
    let {totalCount, pageSize, pageIndex} = this.state
    const {loading} = this.props.stores.homeStore;
    if (totalCount > pageIndex * pageSize && !loading) {
      this.setState({
        pageIndex: pageIndex + 1
      }, () => {
        this.getUserPointRecords()
      })
    }
  }

  render() {
    let {currentNavId,items,totalIntegral} = this.state
    let userInfo = getRuntime().getUserInfo()
    return (
      <View className='my-my_integral'>
          <View>
             <View className='header'>
                <Image src={bg_13} className='img' />
                <View className='desc'>当前可用积分</View>
                <View className='total-integral'>{totalIntegral}</View>
             </View>

             <ScrollView className='scroll-view-nav' scrollX={true}>
                <View className={currentNavId===1 ? 'scroll-item scroll-item-on' : 'scroll-item'}
                      onClick={this.changeNavId.bind(this,1)}
                >获取<Text className='line' /></View>
                <View className={currentNavId===2 ? 'scroll-item scroll-item-on' : 'scroll-item'}
                      onClick={this.changeNavId.bind(this,2)}
                >使用<Text className='line' /></View>
             </ScrollView>
            {items.length > 0 &&
              items.map(item => {
                return(
                  <View className='list-19-item'>
                    <View className='l'>
                      <View className='list-title'>{item.title}</View>
                      <View className='list-info'>{subtime(item.creationTime)}</View>
                    </View>
                    <View className='r apply-res'>
                      {currentNavId===1&& <Text className='money color'>+{item.points}</Text>}
                      {currentNavId===2&& <Text className='money color'>-{item.points}</Text>}
                    </View>
                  </View>
                )
              })
            }
            {items.length<=0&&
            <View className='page-none-info'>
              {currentNavId===1&&<View>暂时还没有获得积分哦~</View>}
              {currentNavId===2&&<View>您还没有积分使用记录哦~</View>}
            </View>
            }
          </View>
      </View>
    )
  }
}

export default Company
